<template name='channelrewards'>
    <div class="ui stackable grid column">
        <div class="sixteen wide column" style="padding-left:5px;">
            <h1>{{translate 'CHANNEL_REWARDS_TITLE'}}</h1>
            <p>{{translate 'CHANNEL_REWARDS_PARAGRAPH'}}</p>
            <table class="ui celled table" style="table-layout: fixed; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;">
                <thead>
                    <tr>
                    <th>Video</th>
                    <th>Publish Time</th>
                    <th>Vote Time</th>
                    <th>Spent</th>
                    <th>Reward</th>
                </tr></thead>
                <tbody>
                    {{#each rewards}}
                    <tr>
                        <td style="overflow: hidden;">
                            <img class="ui avatar image" src="{{userPic author}}">&nbsp;<a href='/v/{{author}}/{{link}}'>{{author}}/{{link}}</a>
                        </td>
                        <td title="{{timeDisplay contentTs}}">{{timeAgo contentTs}}</td>
                        <td title="{{timeDisplay ts}}">{{timeAgo ts}}</td>
                        <td>
                            {{displayPayout vt 0}} VP
                            {{#if burn}}
                                <br />{{displayMoney burn 0 'DTC'}}
                            {{/if}}
                        </td>
                        <td class="{{#if isClaimed this}}positive{{/if}}{{#unless isClaimable this}}warning{{/unless}}">
                            {{#if equals claimable 0}}
                                {{translate "CHANNEL_REWARDS_NO_REWARD_YET"}}
                            {{else}}
                                {{#if isClaimable this}}
                                    {{#if isClaimed this}}
                                        <i class="icon checkmark"></i> {{translate "CHANNEL_REWARDS_CLAIMED"}} {{displayMoney claimable 0 'DTC'}}
                                        <br />{{timeAgo claimed}}
                                    {{else}}
                                        <button type="button" name="button" class="ui fluid red right labeled dtube icon submit claim button">
                                            <div  style="display:inline-block;padding: 0.8em 1em;">{{ translate 'CHANNEL_REWARDS_CLAIM'}} {{displayMoney claimable 0 'DTC'}}</div>
                                        </button>
                                    {{/if}}
                                {{else}}
                                    <strong><i class="icon clock"></i> {{displayMoney claimable 0 'DTC'}}</strong>
                                    <br />{{translate "CHANNEL_REWARDS_CLAIMABLE"}} {{timeAgo timeToClaim}}
                                {{/if}}
                            {{/if}}
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
            {{#unless finishedLoading}}
            <center>
                <button class="ui button" id="loadMoreRewardsBtn">Load more</button>
            </center>
            {{/unless}}
        </div>
    </div>
</template>